<template>
  <div class="container">
    <div>
      财务展示
    </div>
    <!-- 使用v-for指令来循环展示六个数据 -->
    <div v-for="(data, index) in dataList" :key="index">
      <!-- 每三个数据展示结束后，使用el-row和el-col元素来换行展示下三个数据 -->
      <el-row v-if="(index % 3) === 0" :key="index / 3" :gutter="20">
        <!-- 展示第一列数据 -->
        <el-col :xs="24" :sm="12" :md="8">
          <div class="content">
            <img :src="data.picture" alt="图片描述">
            <p class="roomType">房间类型:{{data.roomType}}</p>
            <p class="price">累计收入{{data.price || defaultPrice}}</p>
            <el-button @click="navigateTo(data.roomType)">点击查看详情</el-button>
          </div>
        </el-col>
        <!-- 展示第二列数据 -->
        <el-col :xs="24" :sm="12" :md="8" v-if="dataList[index+1]">
          <div class="content">
            <img :src="dataList[index+1].picture" alt="图片描述">
            <p class="roomType">房间类型:{{dataList[index+1].roomType}}</p>
            <p class="price">累计收入{{dataList[index+1].price || defaultPrice}}</p>
            <el-button @click="navigateTo(dataList[index+1].roomType)">点击查看详情</el-button>
          </div>
        </el-col>
        <!-- 展示第三列数据 -->
        <el-col :xs="24" :sm="12" :md="8" v-if="dataList[index+2]">
          <div class="content">
            <img :src="dataList[index+2].picture" alt="图片描述">
            <p class="roomType">房间类型:{{dataList[index+2].roomType}}</p>
            <p class="price">累计收入{{dataList[index+2].price || defaultPrice}}</p>
            <el-button @click="navigateTo(dataList[index+2].roomType)">点击查看详情</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { moneyInfo } from '@/api/worker'

export default {
  data() {
    return {
      roomTypeList: null,
      dataList: null,
      message: null,
      defaultPrice: 0
    }
  },
  created: function() {
    this.fetchData()
  },
  methods: {
    // navigateTo(val){
    //   this.$message.error("clicked!")
    // },
    fetchData() {
      moneyInfo().then(res => {
        this.dataList = res.data
      })
    },
    navigateTo(param) {
      this.$router.push({
        name: 'Order',
        params: {
          param1: param,
          status: 1
        }
      })
    }
    // book(typeId){
    //   // 跳转到订单页面,携带当前选中的房间类型Id
    //   this.$router.push({
    //     path: '/makeOrder',
    //     name: 'MakeOrder',
    //     params: {
    //       typeId: typeId
    //     }
    //   })
    // }
  }
}
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
}

.content {
  text-align: center;
  margin: 20px 0;
}

img {
  max-width: 100%;
  width: 387px;
  height: 258px;
  display: block;
  margin-bottom: 10px;
}

.username {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

.age {
  font-size: 14px;
  color: #999;
}
</style>
